<template>
  <div class="muji-navHeader">
    <ul>
      <router-link
        tag="li"
        v-for="nav in navs"
        :key="nav.name"
        :to="nav.path"
      >
        <span v-html="nav.meta.icon"></span>
      </router-link>
    </ul>
  </div>
</template>

<script>
import routes from '@/router/routes'
export default {
  name: 'navHeader',
  data () {
    return {
      navs: []
    }
  },
  created () {
    this.navs = routes.filter(route => route.meta.isTabbar)
  }
}
</script>

<style lang="scss">
@font-face {
  font-family: 'iconfont';  /* project id 1969919 */
  src: url('//at.alicdn.com/t/font_1969919_865t69sr7lf.eot');
  src: url('//at.alicdn.com/t/font_1969919_865t69sr7lf.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1969919_865t69sr7lf.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1969919_865t69sr7lf.woff') format('woff'),
  url('//at.alicdn.com/t/font_1969919_865t69sr7lf.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1969919_865t69sr7lf.svg#iconfont') format('svg');
}
.muji-navHeader{
  font-family: 'iconfont';
  width: 100%;
  height: 50px;
  ul{
    display: flex;
    float: right;
    li{
      list-style: none;
      font-size: 20px;
      margin-left: 20px;
    }
  }
}
</style>
